<template lang="pug">
  <div>
    el-dialog(
      :visible.sync="show"
      top="5vh"
      width="560px"
      @open="beforeOpen"
      :before-close="handleClose"
      :close-on-click-modal="false"
      custom-class="dialog-border"
    )
      .modal-title(slot="title") {{ audit.title }}
      el-form(
        :model="form"
        size="small"
        ref="memberForm"
        label-width="100px"
        style="height:500px;width:540px;overflow:auto;padding:16px 0"
        )
        .detail-item.flex
          .detail-item-label 代理公司：
          .detail-item-bd {{item.companyName}} 
        .detail-item.flex
          .detail-item-label 品牌名称：
          .detail-item-bd {{item.name}}
        .detail-item.flex
          .detail-item-label 商标注册号：
          .detail-item-bd {{ item.trademarkRegistrationNumber }}
        .detail-item.flex
          .detail-item-label 品牌公司：
          .detail-item-bd {{ item.brandCompany }}
        .detail-item.flex
          .detail-item-label 负责人：
          .detail-item-bd {{ item.personsInChargeOfCompany }}   
        .detail-item.flex
          .detail-item-label 联系方式：
          .detail-item-bd {{ item.personsInChargeOfCompanyPhone }} 
        .detail-item.flex
          .detail-item-label 已关联材料数：
          .detail-item-bd {{ item.materialAmount }} 
        .detail-item.flex
          .detail-item-label 产地：
          .detail-item-bd(v-if="item.isImport===1") 进口
          .detail-item-bd(v-if="item.isImport===2") 国产         
        .detail-item.flex
          .detail-item-label 申请设计：
          .detail-item-bd {{ item.createDate | filterDate}}   
        .detail-item.flex
          .detail-item-label 品牌logo：
          img(:src="item.logoUrl" style="width:80px;height:80px;margin-left:8px;")
          //- p {{ item.logoUrl }}
        .detail-item.flex
          .detail-item-label 证书：
          //- p {{ item.certificate }}    
          .detail-item-bd.flex
            .detail-item-bd-img(v-for="item in form.certificateList" :style="`background-image: url(${item.fileUrl})`")
            //- span(v-for="item in form.certificateList") 
            //-   img(:src="item.fileUrl" style="width:80px;height:80px;margin-right:8px;margin-bottom:8px;")
        //- el-table-column(prop="isImport" label="产地" width="150")
        .detail-item.flex
          .detail-item-label 审核意见：
          .detail-item-bd(v-if='item.reviewStatus !== 2')
            el-input(              
              type="textarea"
              placeholder="请输入审核意见"
              v-model="auditOpinion"
              maxlength="100"
              show-word-limit
              :rows="9"
              style="width:408px;overflow:auto"
            )
          .detail-item-bd(v-if='item.reviewStatus == 2' style="max-height:192px;width:400px;overflow:auto") {{ approvalOption }}
        
      div(slot="footer" class="dialog-footer")
        el-button(v-if="item.reviewStatus !== 2" @click="auditFailer") {{audit.auditFailer}}
        el-button(v-if="item.reviewStatus !== 2" type="primary" @click="auditSuccess") {{audit.auditSuccess}}
        el-button(v-else type="primary" @click="handleClose") {{audit.sure}}
  </div>
</template>

<script>
import { getSupplierBrandInformation,batchAudit } from 'api'
export default {
  name: 'viewBrandModel',
  props:{
    show: Boolean,
    item: Object,
    audit: {},
  },
  data() {
    return {
      title:'',
      currentItem:this.item,
      form: {
        companyName:'',
        name: '',
        trademarkRegistrationNumber: '',
        brandCompany:'',
        personsInChargeOfCompany:'',
        personsInChargeOfCompanyPhone:'',
        isImport: '',
      },
      formLabelWidth: '100px',
      restaurants:[],
      auditOpinion:'',
      approvalOption:''

    }
  },

  methods:{
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleClose () {
      this.$emit('close')
      // this.$refs.hiddenUpload.clearFiles()
    },
    async beforeOpen () {
      console.log(this.item)
      const { ResultSet } = await this.$axios.post(getSupplierBrandInformation, { supplierBrandId:this.item.supplierBrandId })    
      this.form = { ...ResultSet.userData.supplierBrandInformation }   
      console.log(this.form.approvalOptions)
      if (this.item.reviewStatus === 2) {          
        this.audit.title= '品牌查看'
        this.approvalOption = this.form.approvalOptions
      } else {     
        this.audit.title= '品牌审核'
      }
      console.log(this.audit.title) 
    },
    async submit () {
      if (!this.logoFiles.length && !this.form.logoUrl) {
        this.$message.error('请上传品牌logo！')
        return
      }
      if (this.logoFiles.length) {
        const logoFile = await this.fileUpload(this.logoFiles[0].raw)
        this.form.logo = logoFile.fileId
        this.form.logoUrl = logoFile.fileUrl
      }
      try {
        let query = { ...this.form }
        // console.log(this.form)
        await this.$axios.post(addOrUpdateBrand,  { ...query } )
        this.$message.success('保存成功！')
        this.$emit('confirm')
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
  save () {
      this.$refs.memberForm.validate((valid) => {
        console.log(valid)
        if (valid) this.submit()
      })
    },
    // 审核失败
  async auditFailer(){
    if (this.auditOpinion.length == 0) {
      this.$message.error('审核失败时必须要填写审核意见！')
      return
    }
    console.log(this.auditOpinion)
    // console.log(this.item.reviewStatus)
    const { ResultSet } = await this.$axios.post(batchAudit, {supplierBrandIdList:this.item.supplierBrandId,reviewStatus:3,reviewRemark: this.auditOpinion })    
    console.log(ResultSet)
    this.$emit("failer")
    this.auditOpinion = ''
    console.log(this.auditOpinion)
    },
    // 审核通过
  async auditSuccess(){
    console.log(this.auditOpinion)
    const { ResultSet } = await this.$axios.post(batchAudit, {supplierBrandIdList:this.item.supplierBrandId,reviewStatus:2,reviewRemark: this.auditOpinion})
    this.$emit("failer") 
    this.auditOpinion = ''
  },


    delFiles (key, index) {
      this[key].splice(index, 1)
    },
    delLogoUrl () {
      this.form.logo = ''
      this.form.logoUrl = ''
    },
  },
  
  // beforeRouteEnter (to, from, next) {
  //   // ...
  //   next(vm => {
  //     vm.initRestaurants()
  //     if (to.params.id) {
  //       vm.title = '品牌编辑'  
  //       vm.getBrandLibraryList()            
  //     } else {
  //       vm.title = '品牌添加'
  //     }
  //   })
  // },
}
</script>
<style type="text/css" lang="scss">
.upload-demo {
  .el-upload--picture-card {
    width: 98px;
    height: 98px;
    line-height: 1;
  }
  .el-upload-btn-txt {
    margin-top: 15px;
  }
}

</style>
<style lang="scss" scoped>
  .modal-title{
    font-size:16px;
    font-weight:bold;
  }
  .el-dialog__header{
    border-bottom:1px solid #ccc;
  }
  .el-form-bd {
    margin-top: 15px;
    display: flex;
    // margin-left:100px;
  }
  .el-form-info {
    font-size: 14px;
    color: #AFAFAF;
  }
  .el-form-file {
    display: flex;
    align-items: center;
    .el-form-img {
      position: relative;
      width: 96px;
      height: 96px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-left: 16px;
      border-radius: 4px;
    .icon-chakan {
      position: absolute;
      top: 50%;
      right: 21%;
      transform: translate(50%, -50%);
      cursor: pointer;
      color: #fff;
    }
    .icon-shanchu1{
      position: absolute;
      top: 50%;
      left: 21%;
      transform: translate(50%, -50%);
      cursor: pointer;
      color: #fff;
    }
  }
  .el-bgcover{
    position:absolute;
    top:0;
    left:0;
    width:96px;
    height:96px;
    background-color:#333;
    opacity: 0.7;
    border-radius:4px;
    z-index:1000;
    cursor: pointer;
  }
}
.el-agency{
  border:1px solid #DCDFE6;
  padding:8px 15px;
  border-radius: 4px;
  min-height:32px;
  p{
    line-height:23px;
  }
}
.el-upload--picture-card i{
  font-size:14px;
}
.el-upload-btn {
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #B2B4C7;
  .iconfont {
    font-size: 20px;
    font-weight: bold;
  }
  .el-upload-btn-txt {
    font-size: 14px;
  }
}
.el-upload--picture-card{
  line-height:32px;
}
.el-upload{
  width:96px;
  height:96px;
}
el-form{
  el-form-item{
    el-input{
      border:none;
    }
  }
}
.el-form-item__label{
  color: #8B8EAB!important;
}
el-form-item{
  color: #8B8EAB!important;
}
.certicalList img{
  margin-right:8px;
}
textarea{
  height:192!important;
}
.detail-item {
  display: flex;
  // align-items: center;
  margin-bottom: 24px;
}
.detail-item-label {
  font-size: 14px;
  line-height: 22px;
  color: #8B8EAB;
  width: 100px;
  text-align: right;
}
.detail-item-bd {
  margin-left: 8px;
  color: #3E4373;
  font-size: 14px;
  line-height: 22px;
  &.flex {
    display: flex;
  }
}
.detail-item-bd-img {
  width: 80px;
  height: 80px;
  margin-right: 8px;
  margin-bottom: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>